<template>
  <div class="form-modal">
    <a-modal
      title="填写咨询内容"
      :width="680"
      style="top: 50px;"
      :visible.sync="visible"
      @ok="submit"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <div class="table-page-search-wrapper" >
        <a-form :form="form" layout="inline">
          <div class="row-wrapper">
            <div class="title">客户信息</div>
            <a-row :gutter="12" style="margin-bottom: 45px;color: #000000;" >
              <a-col :md="12" :sm="24" >姓名：{{row_record.name}}</a-col>
              <a-col :md="12" :sm="24" >客户卡号：{{row_record.card_no}}</a-col>
            </a-row>
          </div>
          <div class="row-wrapper">
            <div class="title">填写咨询情况</div>
            <a-row :gutter="12">
              <a-form-item label="未成交原因">
                <a-col :md="24" :lg="10" :sm="24"  class="col-form-item" >
                  <a-select allow-clear style="width: 100%" v-decorator="['noDealReason']" placeholder="未成交原因" >
                    <a-select-option v-for="(item,index) in [{name:'仅咨询'}]" :key="index" :value="item.name" >{{ item.name }}</a-select-option>
                  </a-select>
                </a-col>
              </a-form-item>
            </a-row>
            <a-row :gutter="12">
              <a-col :md="24" :lg="12" :sm="24" class="col-form-item">
                <a-form :form="form" >
                  <a-form-item
                    label="咨询内容"
                    has-feedback
                  >
                    <a-textarea
                      :rows="4"
                      placeholder="请输入咨询内容"
                      v-decorator="['consultCondition', {rules: [{ required: false, message: '请输入咨询内容！' }]}]"
                    >
                    </a-textarea>
                  </a-form-item>
                </a-form>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
    </a-modal>
  </div>

</template>

<script>
import {sceneUpdate} from '@/api/modular/main/customer/customerScene'


export default {
  props:{
    row_record:{
      type:Object,
      default:()=>{{}}
    }
  },
  data () {
    return {
      visible:false,
      confirmLoading:false,
      form: this.$form.createForm(this),
    }
  },
  methods: {
    add () {
      this.visible = true
      this.form.resetFields()
      this.$nextTick(()=>{
        console.log('行数据',this.row_record,this.row_record.noDealReason)
        const record = this.row_record
        this.form.setFieldsValue({
          'noDealReason':record.noDealReason,
          'consultCondition':record.consultCondition,
        })
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    /**
     提交表单
     * */
    submit(){
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111')
          this.confirmLoading = false
          return
        }

        console.log('表单检验通过222',values)
        console.log(this.row_record)
        const obj={
          consultRecord:{
            consultCondition:values.consultCondition,
            nodealReason:values.noDealReason,
            tbConsultRecordId:this.row_record.consultRecordId
          }
        }
        sceneUpdate(obj).then(res=>{
          console.log('提交更新结果为',res)
          if(res.code==200){
            this.$message.success({
              content:'编辑成功',
              duration:1,
              onClose:()=>{
                this.visible=false
                this.$parent.$refs.table.loadData()
              }
            })
          }
        })
        this.confirmLoading = false
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body{
  padding-bottom: 50px !important;
}
.col-form-item{
  padding: 0 4px  20px;
}

/deep/ .ant-select-selection--multiple{
  height: 27px;
}
/deep/ .ant-select-selection--multiple .ant-select-selection__rendered{
  height: 27px;
}
/deep/ .ant-modal-footer{
  border-top: none
}
</style>

